<template>
    <page-header-wrapper>
        <a-card :bordered="false">
            <!--            搜索条件-->
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="48">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="id">
                                <a-input v-model="queryParam.id" placeholder="请输入id" />
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24">
                            <a-form-item label="模板组">
                               <a-input v-model="queryParam.name" placeholder="请输入模板组"></a-input>
                            </a-form-item>
                        </a-col>

                        <a-button type="primary" @click="$refs.table.refresh(true)"
                        >查询</a-button
                        >
                        <a-button
                                style="margin-left: 8px"
                                @click="() => (this.queryParam = {})"
                        >重置</a-button
                        >

                    </a-row>
                </a-form>
            </div>

            <div class="table-operator">
                <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
            </div>
            <!-- 表格数据-->
            <s-table
                    ref="table"
                    size="default"
                    :rowKey="rowKey"
                    :columns="columns"
                    :data="loadData"
                    showPagination="auto"
            >


                <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDel(record)">删除</a>
          </template>
        </span>
            </s-table>
            <!--新建表单-->
            <form-page
                    ref="form"
                    :visible="visible"
                    :loading="confirmLoading"
                    :model="mdl"
                    @cancel="handleCancel"
                    @ok="handleOk"
            />
            <!--            <step-by-step-modal ref="modal" @ok="handleOk"/>-->
        </a-card>
    </page-header-wrapper>
</template>

<script>
    import moment from 'moment'
    import { STable, Ellipsis } from '@/components'
    import {  getAllTemplateGroup } from '@/api/gen'

    //   import StepByStepModal from './modules/StepByStepModal'
    import FormPage from './TemplateForm'

    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
        },
        {
            title: '模板组名称',
            dataIndex: 'name'
        },
        {
            title: '备注',
            dataIndex: 'remarks',
        },

        {
            title: '创建时间',
            dataIndex: 'createTime',
            sorter: true,
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' },
        },
    ]

    const statusMap = {
        0: {
            status: 'default',
            text: '关闭',
        },
        1: {
            status: 'processing',
            text: '运行中',
        },
        2: {
            status: 'success',
            text: '已上线',
        },
        3: {
            status: 'error',
            text: '异常',
        },
    }

    export default {
        name: 'Template',
        components: {
            STable,
            Ellipsis,
            FormPage,
            //       StepByStepModal
        },
        data() {
            this.columns = columns
            return {
                rowKey: 'id',
                // create model
                visible: false,
                confirmLoading: false,
                mdl: null,
                // 高级搜索 展开/关闭
                advanced: false,
                // 查询参数
                queryParam: {},
                // 加载数据方法 必须为 Promise 对象
                loadData: (parameter) => {
                    console.log(parameter)
                    const requestParameters = Object.assign({}, parameter, this.queryParam)
                    console.log('loadData request parameters:', requestParameters)
                    return getAllTemplateGroup(requestParameters).then((res) => {
                        console.log(res)
                        return res.data;
                    })
                },
            }
        },
        filters: {
            statusFilter(type) {
                return statusMap[type].text
            },
            statusTypeFilter(type) {
                return statusMap[type].status
            },
        },
        created() {

        },
        computed: {},
        methods: {
            handleAdd() {
                this.mdl = null
                this.visible = true
            },
            handleEdit(record) {
                this.visible = true
                this.mdl = { ...record }
            },
            handleOk() {
                const form = this.$refs.createModal.form
                this.confirmLoading = true
                form.validateFields((errors, values) => {
                    if (!errors) {
                        console.log('values', values)
                        if (values.id > 0) {
                            // 修改 e.g.
                            new Promise((resolve, reject) => {
                                setTimeout(() => {
                                    resolve()
                                }, 1000)
                            }).then((res) => {
                                this.visible = false
                                this.confirmLoading = false
                                // 重置表单数据
                                form.resetFields()
                                // 刷新表格
                                this.$refs.table.refresh()

                                this.$message.info('修改成功')
                            })
                        } else {
                            // 新增
                            new Promise((resolve, reject) => {
                                setTimeout(() => {
                                    resolve()
                                }, 1000)
                            }).then((res) => {
                                this.visible = false
                                this.confirmLoading = false
                                // 重置表单数据
                                form.resetFields()
                                // 刷新表格
                                this.$refs.table.refresh()

                                this.$message.info('新增成功')
                            })
                        }
                    } else {
                        this.confirmLoading = false
                    }
                })
            },
            handleCancel() {
                this.visible = false

                const form = this.$refs.createModal.form
                form.resetFields() // 清理表单数据（可不做）
            },
            handleDel(record) {
                this.$message.info(`删除成功`)
            },


            resetSearchForm() {
                this.queryParam = {
                    date: moment(new Date()),
                }
            },
        },
    }
</script>
